<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站焦点轮播</title>
    <!-- 引入Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #3b82f6;
            --secondary-color: #64748b;
            --accent-color: #f97316;
            --dark-text: #1e293b;
            --light-text: #94a3b8;
            --card-bg: #ffffff;
            --hover-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f8fafc;
            color: var(--dark-text);
            line-height: 1.6;
        }
        
        /* 轮播容器样式 */
        .featured-carousel {
            margin: 2rem auto;
            max-width: 1200px;
            padding: 0 1rem;
        }
        
        /* 轮播标题栏 */
        .carousel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .carousel-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dark-text);
            position: relative;
            padding-left: 0.75rem;
        }
        
        .carousel-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }
        
        .carousel-tabs {
            display: flex;
            gap: 0.5rem;
            background-color: #f1f5f9;
            padding: 0.25rem;
            border-radius: 30px;
        }
        
        .carousel-tab {
            padding: 0.5rem 1.25rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            color: var(--secondary-color);
        }
        
        .carousel-tab.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        .carousel-tab:hover:not(.active) {
            color: var(--primary-color);
        }
        
        /* 轮播内容样式 */
        .carousel-content {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .carousel-content:hover {
            transform: translateY(-5px);
            box-shadow: var(--hover-shadow);
        }
        
        .carousel-image-container {
            position: relative;
            height: 400px;
            overflow: hidden;
        }
        
        .carousel-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
        }
        
        .carousel-content:hover .carousel-image {
            transform: scale(1.05);
        }
        
        .carousel-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            padding: 2rem 1.5rem 1.5rem;
            color: white;
        }
        
        .carousel-category {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            margin-bottom: 0.75rem;
        }
        
        .category-article {
            background-color: rgba(59, 130, 246, 0.8);
        }
        
        .category-event {
            background-color: rgba(249, 115, 22, 0.8);
        }
        
        .category-topic {
            background-color: rgba(16, 185, 129, 0.8);
        }
        
        .carousel-item-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            line-height: 1.3;
        }
        
        .carousel-item-desc {
            font-size: 0.95rem;
            opacity: 0.9;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .carousel-meta {
            display: flex;
            align-items: center;
            font-size: 0.85rem;
            opacity: 0.8;
            gap: 1.5rem;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        /* 轮播控制按钮 */
        .carousel-control-prev,
        .carousel-control-next {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(4px);
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            transition: opacity 0.3s ease, background-color 0.3s ease;
        }
        
        .carousel-content:hover .carousel-control-prev,
        .carousel-content:hover .carousel-control-next {
            opacity: 1;
        }
        
        .carousel-control-prev:hover,
        .carousel-control-next:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }
        
        .carousel-control-prev {
            left: 1rem;
        }
        
        .carousel-control-next {
            right: 1rem;
        }
        
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            width: 20px;
            height: 20px;
        }
        
        /* 指示器样式 */
        .carousel-indicators {
            bottom: 1rem;
            gap: 0.5rem;
        }
        
        .carousel-indicators [data-bs-target] {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            border: none;
            opacity: 1;
        }
        
        .carousel-indicators .active {
            background-color: white;
            width: 30px;
            border-radius: 5px;
            transition: width 0.3s ease;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .carousel-image-container {
                height: 350px;
            }
        }
        
        @media (max-width: 768px) {
            .carousel-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .carousel-image-container {
                height: 300px;
            }
            
            .carousel-item-title {
                font-size: 1.25rem;
            }
        }
        
        @media (max-width: 576px) {
            .carousel-image-container {
                height: 250px;
            }
            
            .carousel-tabs {
                flex-wrap: wrap;
            }
            
            .carousel-item-desc {
                display: none;
            }
        }
    </style>
</head>
<body>
    <!-- 焦点轮播组件 -->
    <div class="featured-carousel">
        <div class="carousel-header">
            <h2 class="carousel-title">焦点推荐</h2>
            <div class="carousel-tabs">
                <div class="carousel-tab active" data-type="article">热门文章</div>
                <div class="carousel-tab" data-type="event">活动</div>
                <div class="carousel-tab" data-type="topic">专题</div>
            </div>
        </div>
        
        <!-- 文章轮播 -->
        <div class="carousel-container" id="article-carousel">
            <div id="articleCarousel" class="carousel slide carousel-content" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <!-- 文章轮播项1 -->
                    <div class="carousel-item active">
                        <div class="carousel-image-container">
                            <img src="https://picsum.photos/id/1015/1200/600" class="carousel-image" alt="数字时代的社交变革">
                            <div class="carousel-overlay">
                                <span class="carousel-category category-article">社交洞察</span>
                                <h3 class="carousel-item-title">数字时代的社交变革：从线下到线上的人际关系重构</h3>
                                <p class="carousel-item-desc">随着互联网技术的飞速发展，我们的社交方式正在发生深刻变革。从面对面的交流到屏幕上的互动，从真实的握手到虚拟的点赞，人际关系的形态正在被重新定义。</p>
                                <div class="carousel-meta">
                                    <div class="meta-item">
                                        <i class="far fa-user"></i>
                                        <span>陈明亮</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-clock"></i>
                                        <span>2023-06-10</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-eye"></i>
                                        <span>8.5k 阅读</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文章轮播项2 -->
                    <div class="carousel-item">
                        <div class="carousel-image-container">
                            <img src="https://picsum.photos/id/20/1200/600" class="carousel-image" alt="远程工作指南">
                            <div class="carousel-overlay">
                                <span class="carousel-category category-article">职场发展</span>
                                <h3 class="carousel-item-title">2023远程工作完全指南：提高效率的10个实用技巧</h3>
                                <p class="carousel-item-desc">远程工作已经成为新常态，但许多人仍然难以适应这种工作模式。本文分享10个经过实践验证的远程工作技巧，帮助你提高工作效率，保持工作与生活的平衡。</p>
                                <div class="carousel-meta">
                                    <div class="meta-item">
                                        <i class="far fa-user"></i>
                                        <span>林小雨</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-clock"></i>
                                        <span>2023-06-08</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-eye"></i>
                                        <span>5.2k 阅读</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文章轮播项3 -->
                    <div class="carousel-item">
                        <div class="carousel-image-container">
                            <img src="https://picsum.photos/id/24/1200/600" class="carousel-image" alt="独立书店推荐">
                            <div class="carousel-overlay">
                                <span class="carousel-category category-article">读书分享</span>
                                <h3 class="carousel-item-title">隐藏在城市角落的5家独立书店，每一家都值得专程探访</h3>
                                <p class="carousel-item-desc">在大型连锁书店和电子书盛行的时代，独立书店依然保持着独特的魅力。本文介绍5家各具特色的独立书店，它们不仅是阅读的空间，更是城市文化的缩影。</p>
                                <div class="carousel-meta">
                                    <div class="meta-item">
                                        <i class="far fa-user"></i>
                                        <span>王书城</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-clock"></i>
                                        <span>2023-06-05</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-eye"></i>
                                        <span>3.8k 阅读</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 轮播控制按钮 -->
                <button class="carousel-control-prev" type="button" data-bs-target="#articleCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">上一项</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#articleCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">下一项</span>
                </button>
                
                <!-- 轮播指示器 -->
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#articleCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#articleCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#articleCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
            </div>
        </div>
        
        <!-- 活动轮播 (默认隐藏) -->
        <div class="carousel-container" id="event-carousel" style="display: none;">
            <div id="eventCarousel" class="carousel slide carousel-content" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <!-- 活动轮播项1 -->
                    <div class="carousel-item active">
                        <div class="carousel-image-container">
                            <img src="https://picsum.photos/id/26/1200/600" class="carousel-image" alt="城市读书会">
                            <div class="carousel-overlay">
                                <span class="carousel-category category-event">线下活动</span>
                                <h3 class="carousel-item-title">城市读书会：当代文学与社会变迁讨论</h3>
                                <p class="carousel-item-desc">加入我们的月度读书会，本月将讨论当代文学作品如何反映社会变迁。活动包含自由讨论、作者连线和小型社交环节，欢迎所有文学爱好者参加。</p>
                                <div class="carousel-meta">
                                    <div class="meta-item">
                                        <i class="far fa-calendar"></i>
                                        <span>2023-06-18 19:00</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-map-marker"></i>
                                        <span>城市图书馆报告厅</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-user"></i>
                                        <span>248人已报名</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 活动轮播项2 -->
                    <div class="carousel-item">
                        <div class="carousel-image-container">
                            <img src="https://picsum.photos/id/96/1200/600" class="carousel-image" alt="艺术展览">
                            <div class="carousel-overlay">
                                <span class="carousel-category category-event">文化活动</span>
                                <h3 class="carousel-item-title">现代艺术展：数字时代的视觉表达</h3>
                                <p class="carousel-item-desc">本次展览汇集了20位当代艺术家的作品，探索数字技术如何改变艺术创作与表达。展览包括绘画、雕塑、数字艺术和互动装置等多种形式。</p>
                                <div class="carousel-meta">
                                    <div class="meta-item">
                                        <i class="far fa-calendar"></i>
                                        <span>2023-06-15 至 07-15</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-map-marker"></i>
                                        <span>当代艺术中心</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-user"></i>
                                        <span>1256人已参观</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 活动轮播项3 -->
                    <div class="carousel-item">
                        <div class="carousel-image-container">
                            <img src="https://picsum.photos/id/42/1200/600" class="carousel-image" alt="职场讲座">
                            <div class="carousel-overlay">
                                <span class="carousel-category category-event">职场活动</span>
                                <h3 class="carousel-item-title">职场讲座：数字化转型中的个人能力提升</h3>
                                <p class="carousel-item-desc">邀请行业专家分享数字化转型对职场的影响，以及个人如何提升适应能力和竞争力。讲座后设有小型咨询环节，为参与者提供个性化建议。</p>
                                <div class="carousel-meta">
                                    <div class="meta-item">
                                        <i class="far fa-calendar"></i>
                                        <span>2023-06-20 14:30</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-map-marker"></i>
                                        <span>国际会议中心B厅</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-user"></i>
                                        <span>312人已报名</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 轮播控制按钮 -->
                <button class="carousel-control-prev" type="button" data-bs-target="#eventCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">上一项</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#eventCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">下一项</span>
                </button>
                
                <!-- 轮播指示器 -->
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#eventCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#eventCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#eventCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
            </div>
        </div>
        
        <!-- 专题轮播 (默认隐藏) -->
        <div class="carousel-container" id="topic-carousel" style="display: none;">
            <div id="topicCarousel" class="carousel slide carousel-content" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <!-- 专题轮播项1 -->
                    <div class="carousel-item active">
                        <div class="carousel-image-container">
                            <img src="https://picsum.photos/id/45/1200/600" class="carousel-image" alt="毕业季专题">
                            <div class="carousel-overlay">
                                <span class="carousel-category category-topic">教育专题</span>
                                <h3 class="carousel-item-title">毕业季特辑：从校园到职场的无缝过渡</h3>
                                <p class="carousel-item-desc">本专题汇集求职技巧、职场适应、租房指南等实用内容，帮助毕业生顺利完成从校园到职场的转变。包含12篇文章、5个问答和3场线上讲座。</p>
                                <div class="carousel-meta">
                                    <div class="meta-item">
                                        <i class="far fa-file-alt"></i>
                                        <span>12篇文章</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-comment"></i>
                                        <span>5个问答</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-eye"></i>
                                        <span>15.2k 浏览</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 专题轮播项2 -->
                    <div class="carousel-item">
                        <div class="carousel-image-container">
                            <img src="https://picsum.photos/id/65/1200/600" class="carousel-image" alt="数字游民专题">
                            <div class="carousel-overlay">
                                <span class="carousel-category category-topic">生活方式</span>
                                <h3 class="carousel-item-title">数字游民指南：一边工作一边看世界</h3>
                                <p class="carousel-item-desc">探索数字游民的生活方式，包括如何找到远程工作、如何平衡工作与旅行、必备工具推荐等。专题包含8位数字游民的真实故事和实用建议。</p>
                                <div class="carousel-meta">
                                    <div class="meta-item">
                                        <i class="far fa-file-alt"></i>
                                        <span>18篇文章</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-user"></i>
                                        <span>8位达人分享</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-eye"></i>
                                        <span>10.8k 浏览</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 专题轮播项3 -->
                    <div class="carousel-item">
                        <div class="carousel-image-container">
                            <img src="https://picsum.photos/id/28/1200/600" class="carousel-image" alt="心理健康专题">
                            <div class="carousel-overlay">
                                <span class="carousel-category category-topic">健康专题</span>
                                <h3 class="carousel-item-title">都市人的心理健康：压力管理与情绪调节</h3>
                                <p class="carousel-item-desc">本专题关注都市人群的心理健康问题，提供科学的压力管理方法和情绪调节技巧。包含心理学专家的访谈、实用练习指南和社区支持资源。</p>
                                <div class="carousel-meta">
                                    <div class="meta-item">
                                        <i class="far fa-file-alt"></i>
                                        <span>24篇文章</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-user-md"></i>
                                        <span>5位专家参与</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-eye"></i>
                                        <span>22.5k 浏览</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 轮播控制按钮 -->
                <button class="carousel-control-prev" type="button" data-bs-target="#topicCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">上一项</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#topicCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">下一项</span>
                </button>
                
                <!-- 轮播指示器 -->
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#topicCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#topicCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#topicCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 引入Bootstrap JS和Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 轮播切换功能
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有标签和轮播容器
            const tabs = document.querySelectorAll('.carousel-tab');
            const articleCarousel = document.getElementById('article-carousel');
            const eventCarousel = document.getElementById('event-carousel');
            const topicCarousel = document.getElementById('topic-carousel');
            
            // 初始化轮播实例
            const articleCarouselInstance = new bootstrap.Carousel(document.getElementById('articleCarousel'));
            const eventCarouselInstance = new bootstrap.Carousel(document.getElementById('eventCarousel'));
            const topicCarouselInstance = new bootstrap.Carousel(document.getElementById('topicCarousel'));
            
            // 为每个标签添加点击事件
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有标签的active类
                    tabs.forEach(t => t.classList.remove('active'));
                    // 为当前点击的标签添加active类
                    this.classList.add('active');
                    
                    // 获取当前标签的类型
                    const type = this.getAttribute('data-type');
                    
                    // 根据类型显示对应的轮播，隐藏其他轮播
                    if (type === 'article') {
                        articleCarousel.style.display = 'block';
                        eventCarousel.style.display = 'none';
                        topicCarousel.style.display = 'none';
                    } else if (type === 'event') {
                        articleCarousel.style.display = 'none';
                        eventCarousel.style.display = 'block';
                        topicCarousel.style.display = 'none';
                    } else if (type === 'topic') {
                        articleCarousel.style.display = 'none';
                        eventCarousel.style.display = 'none';
                        topicCarousel.style.display = 'block';
                    }
                    
                    // 当切换到新轮播时，重置到第一个 slide
                    if (type === 'article') {
                        articleCarouselInstance.to(0);
                    } else if (type === 'event') {
                        eventCarouselInstance.to(0);
                    } else if (type === 'topic') {
                        topicCarouselInstance.to(0);
                    }
                });
            });
            
            // 自动轮播
            articleCarouselInstance.cycle();
            eventCarouselInstance.cycle();
            topicCarouselInstance.cycle();
        });
    </script>
</body>
</html>
